<template>
  <div class="main">
    <p class="main_text">拖车申述</p>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
          <el-table @selection-change="handleSelectionChange"  :data="tableData"
           :header-cell-style="{ background: '#f0f6fe' }" v-adaptive :show-overflow-tooltip="true" border>
            <el-table-column type="selection" width="50" />
            <el-table-column label="编号" prop="id" />
            <el-table-column label="申请ID" prop="uid" />
            <el-table-column label="申请订单" prop="commentId" />
            <el-table-column label="申请原因" prop="reason" />
            <el-table-column label="申请时间" prop="reportTime" />
            <el-table-column label="审核状态">
              <template #default="props">
                <el-text v-if="props.row.auditStatus == 1">未通过</el-text>
                <el-text v-else-if="props.row.auditStatus == 2">已通过</el-text>
                <el-text v-else>待审核</el-text>
              </template>
            </el-table-column>
            <el-table-column label="操作" :show-overflow-tooltip="false">
              <template #default="props">
                <el-button size="small" link type="primary" @click="auditBtn(props.row)"
                  v-if="props.row.reportStatus == 0 && roleList.write">审核</el-button>
                <el-button size="small" link type="primary" v-else>查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
            @change="handleCurrentChange" />
        <!-- </el-tab-pane>
        <el-tab-pane name="second">
          <template #label>
            <span>待审核</span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="third">
          <template #label>
            <span>已通过</span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="fifth">
          <template #label>
            <span>未通过</span>
          </template>
        </el-tab-pane>
      </el-tabs> -->
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <!-- ****************************** 审核申述单 ****************************** -->
    <el-dialog class="dialog" v-model="auditDialogVisible" width="40%" align-center>
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">审核申述单</p>
        </div>
      </template>
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">申述ID：</div>
          </template>
          {{ auditTableData.uid }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">申述订单：</div>
          </template>
          {{ auditTableData.投诉单.orderSn }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">申述时间：</div>
          </template>
          {{ auditTableData.reportTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">申述原因：</div>
          </template>
          {{ auditTableData.reason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">申述说明：</div>
          </template>
          {{ auditTableData.reason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">投诉时间：</div>
          </template>
          {{ auditTableData.投诉单.createdAt }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">投诉原因：</div>
          </template>
          {{ auditTableData.投诉单.reason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">投诉说明：</div>
          </template>
          {{ auditTableData.投诉单.description }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="auditDialogVisible = false">拒绝</el-button>
        <el-button type="primary" @click="agreeBtn">同意</el-button>
      </template>
    </el-dialog>
    <!-- <el-dialog class="dialog" v-model="refuseAuditDialogVisible" title="审核申述单" width="40%" align-center>

            <template #footer>
                <el-button @click="refuseAuditDialogVisible = false">拒绝</el-button>
                <el-button type="primary" @click="refuseAuditDialogVisible">同意</el-button>
            </template>
        </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import {
  RequestComplaintReportGetlistlimit,
  RequestComplaintReportDetail,
  RequestComplaintReportComplainAudit,
} from '@/api/path/index.js';
import { Edit } from '@element-plus/icons-vue';
import { ref } from 'vue';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
const activeName = ref('first');
const inquireData = ref<any>({
  name: '',
});
const tableData = ref<any>([]);
const auditDialogVisible = ref<any>(false);
const refuseAuditDialogVisible = ref<any>(false);
/* *********************************** 分页获取数据 *********************************** */
const total = ref<any>(10);
const currentPage = ref<any>(1);
const pageSize = ref<any>(10);
const getData = () => {
  RequestComplaintReportGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.reportTime = item.reportTime.replace(/T/g, ' ').slice(0, 16);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
getData();
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getData();
};
const handleSelectionChange = (val: any) => { };
/* *********************************** 审核 *********************************** */
const auditTableData = ref<any>();

const auditBtn = (row: any) => {
  // auditDialogVisible.value = true
  RequestComplaintReportDetail(row.id).then((res: any) => {
    auditTableData.value = res.resultObj;
    //对话框显示数据还不存在导致报错
    auditDialogVisible.value = true;
  });
};
/* *********************************** 同意 *********************************** */
const agreeBtn = () => {
  auditDialogVisible.value = false;
  RequestComplaintReportComplainAudit({
    id: auditTableData.value.id,
    uid: auditTableData.value.uid,
    commentId: auditTableData.value.commentId,
    reason: auditTableData.value.reason,
    auditStatus: 2,
  }).then((res: any) => {
    console.log(res);
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: 0.625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

::v-deep .el-descriptions__label {
  width: 6.25rem;
}

.el-input-number {
  width: 100%;
}

.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  .dialog {
    .el-icon svg {
      color: #fff;
    }
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }

  .el-form {
    .el-icon svg {
      color: #dcdfe6;
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: 0.0625rem solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.addTable {
  width: 100%;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #e7f0fe;
  border: 0.0625rem dotted #116cf8;
  margin-top: 0.375rem;
  color: #116cf8;
  user-select: none;
  cursor: pointer;
}

.upload_img {
  width: 4.875rem;
  height: 4.875rem;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  border: 0.125rem dotted #dcdfe6;
  border-radius: 0.5rem;
}

::v-deep .el-upload--picture-card {
  width: 5rem;
  height: 5rem;
  opacity: 0;
  border: none;
}

::v-deep .el-upload {
  .el-icon svg {
    color: #dcdfe6;
  }
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
  object-fit: contain;
  border: none;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 5rem;
  height: 5rem;
  border: none;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 5rem;
  height: 5rem;
  border: none;
}
</style>
